<template>
  <div>
    <el-container>
<!--      <el-aside width="5%"></el-aside>-->
      <el-main class="register-main"
               style="margin-bottom: 10px;width: 400px;height:100%;vertical-align: center">
        <h1 style="color: #409EFF;text-align: center">编辑老年人信息</h1>

        <img :src="elder.profilePhoto" style="width:200px;height:200px;margin-left: 250px">

        <el-form :model="elder" label-width="20%">
          <el-form-item label="姓名">
            <el-input v-model="elder.userName" type="text" autocomplete="off" placeholder="请输入用户名" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="性别" required>
            <el-select v-model="gender" placeholder="请选择性别" style="width: 90%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" required>
            <el-input v-model="elder.phone" type="tel" autocomplete="off" placeholder="请输入电话" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" required>
            <el-input v-model="elder.idCard" type="email" autocomplete="off" placeholder="请输入身份证号" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="生日" required>
            <el-input v-model="elder.birthday" type="date" autocomplete="off" placeholder="请输入生日日期" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="入住日期" required>
            <el-input v-model="elder.checkInDate" type="date" autocomplete="off" placeholder="请输入入住日期" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="离开日期" required>
            <el-input v-model="elder.checkOutDate" type="date" autocomplete="off" placeholder="请输入离开日期" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="描述" required>
            <el-input v-model="elder.description" type="text" autocomplete="off" placeholder="请输入老人描述" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="第一监护人" required>
            <el-input v-model="elder.firstGuardianName" type="text" autocomplete="off" placeholder="请输入第一监护人姓名" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="关系" required>
            <el-input v-model="elder.firstGuardianRelationship" type="text" autocomplete="off" placeholder="请输入与第一监护人的关系" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="电话" required>
            <el-input v-model="elder.firstGuardianPhone" type="text" autocomplete="off" placeholder="请输入第一监护人的电话" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="微信" required>
            <el-input v-model="elder.firstGuardianWechat" type="text" autocomplete="off" placeholder="请输入第一监护人的微信" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="第二监护人" required>
            <el-input v-model="elder.secGuardianName" type="text" autocomplete="off" placeholder="请输入第二监护人的姓名" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="关系" required>
            <el-input v-model="elder.secGuardianRelationship" type="text" autocomplete="off" placeholder="请输入与第二监护人的关系" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="电话" required>
            <el-input v-model="elder.secGuardianPhone" type="text" autocomplete="off" placeholder="请输入第二监护人的电话" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="微信" required>
            <el-input v-model="elder.secGuardianWechat" type="text" autocomplete="off" placeholder="请输入第二监护人的微信" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="房间号" required>
            <el-input v-model="elder.roomNumber" type="text" autocomplete="off" placeholder="请输入老人的房间号" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="健康状态" required>
            <el-input v-model="elder.healthState" type="text" autocomplete="off" placeholder="请输入老人的健康状态" clearable
                      size="medium" style="width: 90%"></el-input>
          </el-form-item>

          <el-form-item label-width="0">
            <el-button type="primary" @click="save()" style="margin-left: 20%;width:100px">保存</el-button>
            <el-button type="warning" @click="reload()" style="margin-left: 20%;width:100px">重置</el-button>
            <div class="clearBox"></div>
          </el-form-item>
        </el-form>
      </el-main>
<!--      <el-aside width="5%"></el-aside>-->
    </el-container>
  </div>
</template>

<script>
export default {
  name: "EditElder",
  data() {
    return {
      elder: {
        id:"",
        userName: "",
        gender:"",
        idCard: "",
        phone: "",
        birthday:"",
        checkInDate:"",
        checkOutDate:"",
        description:"",
        imgsetDir:"",
        profilePhoto:"",
        firstGuardianName:"",
        firstGuardianRelationship:"",
        firstGuardianPhone:"",
        firstGuardianWechat:"",
        secGuardianName:"",
        secGuardianRelationship:"",
        secGuardianPhone:"",
        secGuardianWechat:"",
        roomNumber:"",
        healthState:"",
      },
      gender:"",
      options: [{
        value: '选项1',
        label: '男'
      }, {
        value: '选项2',
        label: '女',
      }, {
        value: '选项3',
        label: '其他',
      }],
    }
  },
  watch: {
    gender(newName){
      if(newName == "选项1"){
        this.elder.gender = "男";
      }
      else if(newName == "选项2") {
        this.elder.gender = "女";
        //print(111);
      }
      else if(newName == "选项3") {
        this.elder.gender = "其他";
        //print(111);
      }
    }
  },
  computed: {
    getElderUrl: function(){
      if(localStorage.getItem('elderUrl') == "null" || localStorage.getItem('elderUrl') == null || localStorage.getItem('elderUrl') == "") {
        return "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
      }
      else{
        return localStorage.getItem('elderUrl');
      }
    }
  },
  created() {
    if (this.$route.params.isReload == 'true') {
      this.$router.go(0);
    }
    this.getElderInfo();
  },
  methods: {
    reload: function(){
      this.$router.go(0);
      this.getElderInfo()
    },
    save: function(){
      const _this = this;
      this.$axios.post('/oldperson/update',_this.elder, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function (/*response*/) {
        //alert(_this.elder.checkInDate)
        // 这里是处理正确的回调
        _this.$message({
          message: '保存成功',
          type: 'success'
        });
        _this.$router.go(0);
      }).catch(function (response) {
        // 这里是处理错误的回调
        _this.$message.error(response.data.message)
      })
    },

    handleClose(done) {
      done();
    },
    getElderInfo:function(){
      this.elder.id = localStorage.getItem('elderId')
      this.elder.userName = localStorage.getItem('elderName');
      this.elder.gender = localStorage.getItem('elderGender');
      this.gender = this.elder.gender
      this.elder.phone = localStorage.getItem('elderPhone');
      this.elder.idCard = localStorage.getItem('elderIdCard');
      this.elder.birthday = localStorage.getItem('elderBirthday');
      this.elder.checkInDate = localStorage.getItem('elderCheckInDate');
      this.elder.checkOutDate = localStorage.getItem('elderCheckOutDate');
      this.elder.imgsetDir = localStorage.getItem('elderImgsetDir');
      this.elder.profilePhoto = localStorage.getItem('elderProfilePhoto');
      this.elder.description = localStorage.getItem('elderDescription');
      this.elder.roomNumber = localStorage.getItem('elderRoomNumber');
      this.elder.firstGuardianName = localStorage.getItem('elderFirstGuardianName');
      this.elder.firstGuardianRelationship = localStorage.getItem('elderFirstGuardianRelationship');
      this.elder.firstGuardianPhone = localStorage.getItem('elderFirstGuardianPhone');
      this.elder.firstGuardianWechat = localStorage.getItem('elderFirstGuardianWechat');
      this.elder.secGuardianName = localStorage.getItem('elderSecGuardianName');
      this.elder.secGuardianRelationship = localStorage.getItem('elderSecGuardianRelationship');
      this.elder.secGuardianPhone = localStorage.getItem('elderSecGuardianPhone');
      this.elder.secGuardianWechat = localStorage.getItem('elderSecGuardianWechat');
      this.elder.healthState = localStorage.getItem('elderHealthState');
      this.elder.profilePhoto = this.getElderUrl;

    },
  }

}
</script>

<style scoped>

</style>
